<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />















  
  
  <link href="/blog/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/blog/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/blog/css/main.css?v=5.1.2" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="Hexo, NexT" />








  <link rel="shortcut icon" type="image/x-icon" href="/blog/favicon.ico?v=5.1.2" />






<meta name="description" content="1. 使用 Jenkins 自动化构建1.1. 背景前端构建及部署工作大多都是人工去做，随着业务扩大，项目迭代速度变快，人员增多，各种问题都暴露出来，本文是对前端自动化工作流进行探索后的一篇经验分享，将通过一个简单案例分享一下基于 Jenkins 的前端自动化工作流搭建的过程，搭建完这套工作流，我们只需要在本地发起一个 git 提交，剩下的打包构建，代码部署，提醒等功能全部自动化完成，让持续集成、">
<meta property="og:type" content="article">
<meta property="og:title" content="自动化构建之 Jenkins™">
<meta property="og:url" content="http://xiezixi.oschina.io/2018/06/01/自动化-Jenkins/index.html">
<meta property="og:site_name" content="个人博客">
<meta property="og:description" content="1. 使用 Jenkins 自动化构建1.1. 背景前端构建及部署工作大多都是人工去做，随着业务扩大，项目迭代速度变快，人员增多，各种问题都暴露出来，本文是对前端自动化工作流进行探索后的一篇经验分享，将通过一个简单案例分享一下基于 Jenkins 的前端自动化工作流搭建的过程，搭建完这套工作流，我们只需要在本地发起一个 git 提交，剩下的打包构建，代码部署，提醒等功能全部自动化完成，让持续集成、">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins1.png">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins2.png">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins4.png">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins3.png">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins5.png">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins6.png">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins7.png">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins8.png">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins9.png">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins10.png">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins11.png">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins12.png">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins13.png">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins14.png">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins15.png">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins16.png">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins17.png">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins18.png">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins19.png">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins20.png">
<meta property="og:image" content="http://xiezixi.oschina.io/blog/images/jenkins21.png">
<meta property="og:updated_time" content="2018-06-01T09:06:31.955Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="自动化构建之 Jenkins™">
<meta name="twitter:description" content="1. 使用 Jenkins 自动化构建1.1. 背景前端构建及部署工作大多都是人工去做，随着业务扩大，项目迭代速度变快，人员增多，各种问题都暴露出来，本文是对前端自动化工作流进行探索后的一篇经验分享，将通过一个简单案例分享一下基于 Jenkins 的前端自动化工作流搭建的过程，搭建完这套工作流，我们只需要在本地发起一个 git 提交，剩下的打包构建，代码部署，提醒等功能全部自动化完成，让持续集成、">
<meta name="twitter:image" content="http://xiezixi.oschina.io/blog/images/jenkins1.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/blog/',
    scheme: 'Muse',
    sidebar: {"position":"left","display":"post","offset":12,"offset_float":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://xiezixi.oschina.io/2018/06/01/自动化-Jenkins/"/>





  <title>自动化构建之 Jenkins™ | 个人博客</title>
  














</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
  
  
    
  

  <div class="container sidebar-position-left page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/blog/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">个人博客</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle">曦瓜皮</p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/blog/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/blog/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/blog/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>


 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://xiezixi.oschina.io/blog/2018/06/01/自动化-Jenkins/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="曦瓜皮">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blog/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="个人博客">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">自动化构建之 Jenkins™</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-06-01T17:06:31+08:00">
                2018-06-01
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/自动化/" itemprop="url" rel="index">
                    <span itemprop="name">自动化</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h2 id="1-使用-Jenkins-自动化构建"><a href="#1-使用-Jenkins-自动化构建" class="headerlink" title="1. 使用 Jenkins 自动化构建"></a>1. 使用 Jenkins 自动化构建</h2><h3 id="1-1-背景"><a href="#1-1-背景" class="headerlink" title="1.1. 背景"></a>1.1. 背景</h3><p>前端构建及部署工作大多都是人工去做，随着业务扩大，项目迭代速度变快，人员增多，各种问题都暴露出来，本文是对前端自动化工作流进行探索后的一篇经验分享，将通过一个简单案例分享一下基于 Jenkins 的前端自动化工作流搭建的过程，搭建完这套工作流，我们只需要在本地发起一个 git 提交，剩下的打包构建，代码部署，提醒等功能全部自动化完成，让持续集成、持续交付、持续部署变得简单易操作，真正解决人工构建部署的诸多问题。</p>
<h3 id="1-2-Jenkins-是什么"><a href="#1-2-Jenkins-是什么" class="headerlink" title="1.2. Jenkins 是什么"></a>1.2. Jenkins 是什么</h3><p>Jenkins 是一款业界流行的开源持续集成工具，广泛用于项目开发，具有自动化构建、测试和部署等功能。</p>
<h3 id="1-3-本案例要实现的功能"><a href="#1-3-本案例要实现的功能" class="headerlink" title="1.3. 本案例要实现的功能"></a>1.3. 本案例要实现的功能</h3><p>本地项目发起一个 git 提交，剩下的打包构建，代码部署等全部自动化完成。</p>
<h2 id="2-项目准备"><a href="#2-项目准备" class="headerlink" title="2. 项目准备"></a>2. 项目准备</h2><h3 id="2-1-项目准备"><a href="#2-1-项目准备" class="headerlink" title="2.1. 项目准备"></a>2.1. 项目准备</h3><p>先准备本地一个项目，我这里直接使用 vue-cli 脚手架生成了一个项目，其他技术栈也一样，只要是个项目就行。</p>
<ul>
<li>在创建项目之前，必须要有 nodeJS 环境（<a href="http://nodejs.cn/download/" target="_blank" rel="noopener">nodeJS下载地址</a>）；并将 npm 的镜像设置为国内淘宝镜像： <code>npm config set registry https://registry.npm.taobao.org</code>；</li>
<li>使用 npm 全局安装 vue 的脚手架工具，<code>npm install -g vue-cli</code>；</li>
<li>使用 npm 全局安装 webpack 的脚手架工具，<code>npm install -g webpack</code>；<br>本地创建项目 <code>vue init webpack jenkins-demo</code> ：<br><img src="http://xiezixi.oschina.io/blog/images/jenkins1.png" alt="jenkins1"><br>我们可以选择 yarn 来代替 npm；相比 npm，yar n的速度更快，更安全。可到 <a href="https://yarn.bootcss.com/" target="_blank" rel="noopener">yarn官网</a> 进行查看。<br>使用 <code>npm install</code> 安装完依赖之后，可以运行 <code>npm start</code> 来查看项目：<br><img src="http://xiezixi.oschina.io/blog/images/jenkins2.png" alt="jenkins2"></li>
</ul>
<h3 id="2-2-创建远程仓库"><a href="#2-2-创建远程仓库" class="headerlink" title="2.2. 创建远程仓库"></a>2.2. 创建远程仓库</h3><p>建立这个项目的远端git仓库，并把本地代码提交上去。可以为 github，gitlab，码云等，我这里用的是 github。<br><img src="http://xiezixi.oschina.io/blog/images/jenkins4.png" alt="jenkins4"></p>
<h3 id="2-3-服务器环境"><a href="#2-3-服务器环境" class="headerlink" title="2.3. 服务器环境"></a>2.3. 服务器环境</h3><p>我这里用的是一台 CentOS 6.8 64 位服务器，可以使用 yum install 来安装环境配置。</p>
<ul>
<li>Java<br><code>yum install  java-1.8.0-openjdk   java-1.8.0-openjdk-devel</code>；</li>
<li>Git<br><code>yum install git</code> 拉取项目时需要；</li>
<li>Node<br><code>yum install nodejs</code> 编译前端项目；</li>
<li>Jenkins<br><code>yum install jenkins</code><br>jenkins 无非就是一个 war 包，可以在官网直接下载。</li>
</ul>
<h3 id="2-4-启动-Jenkins"><a href="#2-4-启动-Jenkins" class="headerlink" title="2.4. 启动 Jenkins"></a>2.4. 启动 Jenkins</h3><p>下载完 war 包后，可以直接通过 <code>java -jar jenkins.war</code> 来运行 Jenkins，也可以通过 tomcat 来运行 Jenkins。</p>
<ol>
<li>jenkins 的默认端口是 8080，启动成功后在浏览器打开</li>
<li>进入后会让我们输管理员密码，打开网页上提示路径下的文件，复制密码粘贴输入即可</li>
<li>然后会让安装需要的插件，此处选默认即可，等待安装完成</li>
<li>创建一个管理员账户</li>
<li>上面都完成后会看到这个界面<br><img src="http://xiezixi.oschina.io/blog/images/jenkins3.png" alt="jenkins3"><br>该案例最终 Jenkins 运行在 <code>http://111.231.238.23:8080/</code></li>
</ol>
<h3 id="2-5-创建任务"><a href="#2-5-创建任务" class="headerlink" title="2.5. 创建任务"></a>2.5. 创建任务</h3><p>点击创建一个新任务<strong>自由风格的软件项目</strong>。<br><img src="http://xiezixi.oschina.io/blog/images/jenkins5.png" alt="jenkins3"></p>
<h2 id="3-实现-git-钩子功能"><a href="#3-实现-git-钩子功能" class="headerlink" title="3. 实现 git 钩子功能"></a>3. 实现 git 钩子功能</h2><p>首先我们要实现一个 git 钩子功能，就是我们向 github/gitlab/码云等远程仓库 push 我们的代码时，Jenkins 能知道我们提交了代码，这是自动构建自动部署的前提，钩子的实现原理是在远端仓库上配置一个 Jenkins 服务器的接口地址，当本地向远端仓库发起 push 时，远端仓库会向配置的 Jenkins 服务器的接口地址发起一个带参数的请求，Jenkins 收到后开始工作。</p>
<h3 id="3-1-添加远程仓库地址"><a href="#3-1-添加远程仓库地址" class="headerlink" title="3.1. 添加远程仓库地址"></a>3.1. 添加远程仓库地址</h3><p><img src="http://xiezixi.oschina.io/blog/images/jenkins6.png" alt="jenkins6"></p>
<h3 id="3-2-添加触发器"><a href="#3-2-添加触发器" class="headerlink" title="3.2. 添加触发器"></a>3.2. 添加触发器</h3><p>安装 Generic Webhook Trigger Plugin 插件（系统管理-插件管理-搜索 Generic Webhook Trigger Plugin ）如果可选插件列表为空，点击高级标签页。<br>第 2 步安装的触发器插件功能很强大，可以根据不同的触发参数触发不同的构建操作，比如我向远程仓库提交的是 master 分支的代码，就执行代码部署工作，我向远程仓库提交的是某个 feature 分支，就执行单元测试，单元测试通过后合并至 dev 分支。灵活性很高，可以自定义配置适合自己公司的方案，这里方便演示我们不做任何条件判断，只要有提交就触发。在任务配置里勾选 Generic Webhook Trigger 即可。<br><img src="http://xiezixi.oschina.io/blog/images/jenkins7.png" alt="jenkins6"></p>
<h3 id="3-3-创库配置钩子"><a href="#3-3-创库配置钩子" class="headerlink" title="3.3. 创库配置钩子"></a>3.3. 创库配置钩子</h3><p>仓库配置钩子 此处以 github 为例，进入 github 项目主页后，点击 settings -&gt; Webhooks -&gt; Add webhook。<br><img src="http://xiezixi.oschina.io/blog/images/jenkins8.png" alt="jenkins6"><br>Payload URL 格式为：http://(User ID):(API Token)@&lt;(Jenkins IP:PORT)&gt;/generic-webhook-trigger/invoke。<br>userid 和 api token 在 Jenkins 的系统管理-管理用户-admin-设置里。<br><img src="http://xiezixi.oschina.io/blog/images/jenkins9.png" alt="jenkins6"><br>Jenkins IP 地址和端口是你部署 Jenkins 服务器的 ip 地址，端口号没改过的话就是 8080。密码填你和上面 userid 对应的密码。下面的几个选项是你在仓库执行什么操作的时候触发钩子，这里默认用 push，content-type 默认为 application/json。</p>
<h3 id="3-4-测试钩子"><a href="#3-4-测试钩子" class="headerlink" title="3.4. 测试钩子"></a>3.4. 测试钩子</h3><p><img src="http://xiezixi.oschina.io/blog/images/jenkins10.png" alt="jenkins6"><br>点击测试，如果配置是成功的，你的 Jenkins 左侧栏构建执行状态里将会出现一个任务。<br><img src="http://xiezixi.oschina.io/blog/images/jenkins11.png" alt="jenkins6"><br>另外，你也可以试下本地提交代码，提交代码后，Jenkins 也会开始一个任务,目前我们没有配置任务开始后让它做什么，所以默认它只会在你提交新代码后，将新代码拉取到 Jenkins 服务器上。到此为止，git 钩子我们配置完成。</p>
<h2 id="4-实现自动化构建"><a href="#4-实现自动化构建" class="headerlink" title="4. 实现自动化构建"></a>4. 实现自动化构建</h2><p>git push 触发钩子后，Jenkins 就要开始工作了，自动化的构建任务可以有很多种，比如说安装升级依赖包，单元测试，e2e 测试，压缩静态资源，批量重命名等等，无论是 npm script 还是 webpack，gulp 之类的工作流，你之前在本地能做的，在这里同样可以做。</p>
<ol>
<li>首先，和本地运行 npm script 一样，我们要想在 Jenkins 里面执行 npm 命令，先要在 Jenkins 里面配置 node 的环境，当然服务器有 node 环境也可以。</li>
<li>（若服务器已经有 node 环境，可以跳过此步骤）Jenkins 里面配置 node 的环境，可以通过安装插件的方式，使用 nvm wrapper 这个插件。打开刚刚的 Jenkins 任务，点击配置里面的构建环境，勾选这个，并指定一个 node 版本。<br><img src="http://xiezixi.oschina.io/blog/images/jenkins12.png" alt="jenkins6"></li>
<li>点击构建，把要执行的命令输进去，多个命令使用 &amp;&amp; 分开。<br><img src="http://xiezixi.oschina.io/blog/images/jenkins13.png" alt="jenkins6"></li>
<li>保存后，此时本地修改一下代码 push 测试一下（也可以点击立即构建测试），点击本次触发的那个任务，选择控制台输出，将会看到 Jenkins 在云端执行的过程。<br><img src="http://xiezixi.oschina.io/blog/images/jenkins14.png" alt="jenkins6"><br>命令行最后一行是 Finished 状态的如果是 SUCCESS（蓝色）则证明执行的任务都顺利进行，是 FAILURE（红色）则证明中间有重大错误导致任务失败，UNSTABLE（黄色）代表有虽然有些小问题，但不阻碍任务进行，黄色或者红色可以去命令行看下错误输出，看下哪里出了问题。<br>如果上一步是SUCCESS，点击项目的工作空间，将会发现多了 dist 和 node_modules 两个文件夹。<br>至此，我们已经搭建了一个简易的构建工作流程，构建完成了，我们需要自动化部署。<br><img src="http://xiezixi.oschina.io/blog/images/jenkins15.png" alt="jenkins6"></li>
</ol>
<h2 id="5-实现自动化部署"><a href="#5-实现自动化部署" class="headerlink" title="5. 实现自动化部署"></a>5. 实现自动化部署</h2><h3 id="5-1-SSH-Server-配置"><a href="#5-1-SSH-Server-配置" class="headerlink" title="5.1. SSH Server 配置"></a>5.1. SSH Server 配置</h3><p>自动化部署可能是我们最需要的功能了，公司就一台服务器，我们可以使用人工部署的方式，但是如果公司有100台服务器呢，人工部署就有些吃力了，而且一旦线上出了问题，回滚也很麻烦。所以这一节实现一下自动部署的功能。</p>
<ol>
<li>首先，先在 Jenkins 上装一个插件 Publish Over SSH ，我们将通过这个工具实现服务器部署功能。</li>
<li>在要部署代码的服务器上创建一个文件夹用于接收 Jenkins 传过来的代码，我在服务器上建了一个 <code>/work/front</code> 的文件夹，用于接收传送过来的文件（注意文件的权限）。</li>
<li>Jenkins 想要往服务器上部署代码必须登录服务器才可以，这里有两种登录验证方式，一种是 ssh 验证，一种是密码验证，就像你自己登录你的服务器，你可以使用 ssh 免密登录，也可以每次输密码登录，系统管理-系统设置里找到 Publish over SSH 这一项。</li>
</ol>
<p>重点参数说明：</p>
<blockquote>
<p>Passphrase：密码（key的密码，没设置就是空）<br>  Path to key：key文件（私钥）的路径<br>  Key：将私钥复制到这个框中(path to key和key写一个即可)</p>
<p>SSH Servers 的配置：<br>  SSH Server Name：标识的名字（随便你取什么）<br>  Hostname：需要连接ssh的主机名或ip地址（建议ip）<br>  Username：用户名<br>  Remote Directory：远程目录（上面第二步建的testjenkins文件夹的路径）</p>
<p>高级配置：<br>  Use password authentication, or use a different key：勾选这个可以使用密码登录，不想配 ssh 的可以用这个先试试<br>  Passphrase / Password：密码登录模式的密码<br>  Port：端口（默认22）<br>  Timeout (ms)：超时时间（毫秒）默认300000</p>
</blockquote>
<p>配置完成后，点击 Test Configuration 测试一下是否可以连接上，如果成功会返回 success，失败会返回报错信息，根据报错信息改正即可。<br><img src="http://xiezixi.oschina.io/blog/images/jenkins16.png" alt="jenkins6"></p>
<h3 id="5-2-构建配置"><a href="#5-2-构建配置" class="headerlink" title="5.2. 构建配置"></a>5.2. 构建配置</h3><p>接下来进入我们创建的任务，点击构建，增加 2 行代码，意思是将 dist 里面的东西打包成一个文件，因为我们要传输。<br>传输时请特别注意是否拥有被传输的文件夹的读写修改权限。<br><img src="http://xiezixi.oschina.io/blog/images/jenkins17.png" alt="jenkins6"><br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">npm install &amp;&amp;</span><br><span class="line">rm -rf dist &amp;&amp;</span><br><span class="line">npm run build</span><br><span class="line">tar -zcvf dist.tar dist</span><br></pre></td></tr></table></figure></p>
<p>点击构建后操作，增加构建后操作步骤，选择 send build artificial over SSH， 参数说明：</p>
<blockquote>
<p>Name ：选择一个你配好的ssh服务器<br>  Source files ：写你要传输的文件路径<br>  Remove prefix ：要去掉的前缀，不写远程服务器的目录结构将和 Source files 写的一致<br>  Remote directory ：写你要部署在远程服务器的那个目录地址下，不写就是 SSH Servers 配置里默认远程目录<br>  Exec command ：传输完了要执行的命令，我这里执行了解压缩和解压缩完成后删除压缩包2个命令。</p>
</blockquote>
<p><img src="http://xiezixi.oschina.io/blog/images/jenkins18.png" alt="jenkins6"></p>
<h3 id="5-3-配置-Nginx-代理静态资源"><a href="#5-3-配置-Nginx-代理静态资源" class="headerlink" title="5.3. 配置 Nginx 代理静态资源"></a>5.3. 配置 Nginx 代理静态资源</h3><p><img src="http://xiezixi.oschina.io/blog/images/jenkins19.png" alt="jenkins6"></p>
<h3 id="5-4-push-测试"><a href="#5-4-push-测试" class="headerlink" title="5.4. push 测试"></a>5.4. push 测试</h3><p>现在当我们在本地将 Welcome to Your Vue.js App 修改为 Jenkins 后发出一个 git push，过一会就会发现我们的服务器上已经部署好了最新的代码。<br><img src="http://xiezixi.oschina.io/blog/images/jenkins20.png" alt="jenkins6"><br><img src="http://xiezixi.oschina.io/blog/images/jenkins21.png" alt="jenkins6"></p>
<h2 id="6-参考文档"><a href="#6-参考文档" class="headerlink" title="6. 参考文档"></a>6. 参考文档</h2><p><a href="http://www.ruanyifeng.com/blog/2015/09/continuous-integration.html" target="_blank" rel="noopener">持续集成是什么</a><br><a href="http://efe.baidu.com/blog/front-end-continuous-integration-tools/" target="_blank" rel="noopener">前端开源项目持续集成三剑客</a></p>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/blog/2018/06/01/JS-闭包/" rel="next" title="JavaScript 之闭包™">
                <i class="fa fa-chevron-left"></i> JavaScript 之闭包™
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/blog/2018/06/04/JS-ES6常用技巧/" rel="prev" title="ECMAScript6 之常用技巧">
                ECMAScript6 之常用技巧 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/blog/images/avatar.jpg"
               alt="曦瓜皮" />
          <p class="site-author-name" itemprop="name">曦瓜皮</p>
           
              <p class="site-description motion-element" itemprop="description"></p>
          
        </div>
        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
              <a href="/blog/archives/">
                <span class="site-state-item-count">15</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-categories">
              <a href="/blog/categories/index.html">
                <span class="site-state-item-count">6</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          

        </nav>

        

        <div class="links-of-author motion-element">
          
        </div>

        
        

        
        

        

      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-使用-Jenkins-自动化构建"><span class="nav-number">1.</span> <span class="nav-text">1. 使用 Jenkins 自动化构建</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-1-背景"><span class="nav-number">1.1.</span> <span class="nav-text">1.1. 背景</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-2-Jenkins-是什么"><span class="nav-number">1.2.</span> <span class="nav-text">1.2. Jenkins 是什么</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-本案例要实现的功能"><span class="nav-number">1.3.</span> <span class="nav-text">1.3. 本案例要实现的功能</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-项目准备"><span class="nav-number">2.</span> <span class="nav-text">2. 项目准备</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-项目准备"><span class="nav-number">2.1.</span> <span class="nav-text">2.1. 项目准备</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-2-创建远程仓库"><span class="nav-number">2.2.</span> <span class="nav-text">2.2. 创建远程仓库</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-3-服务器环境"><span class="nav-number">2.3.</span> <span class="nav-text">2.3. 服务器环境</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-4-启动-Jenkins"><span class="nav-number">2.4.</span> <span class="nav-text">2.4. 启动 Jenkins</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-5-创建任务"><span class="nav-number">2.5.</span> <span class="nav-text">2.5. 创建任务</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-实现-git-钩子功能"><span class="nav-number">3.</span> <span class="nav-text">3. 实现 git 钩子功能</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-1-添加远程仓库地址"><span class="nav-number">3.1.</span> <span class="nav-text">3.1. 添加远程仓库地址</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-2-添加触发器"><span class="nav-number">3.2.</span> <span class="nav-text">3.2. 添加触发器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-3-创库配置钩子"><span class="nav-number">3.3.</span> <span class="nav-text">3.3. 创库配置钩子</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-4-测试钩子"><span class="nav-number">3.4.</span> <span class="nav-text">3.4. 测试钩子</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-实现自动化构建"><span class="nav-number">4.</span> <span class="nav-text">4. 实现自动化构建</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-实现自动化部署"><span class="nav-number">5.</span> <span class="nav-text">5. 实现自动化部署</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#5-1-SSH-Server-配置"><span class="nav-number">5.1.</span> <span class="nav-text">5.1. SSH Server 配置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-2-构建配置"><span class="nav-number">5.2.</span> <span class="nav-text">5.2. 构建配置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-3-配置-Nginx-代理静态资源"><span class="nav-number">5.3.</span> <span class="nav-text">5.3. 配置 Nginx 代理静态资源</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-4-push-测试"><span class="nav-number">5.4.</span> <span class="nav-text">5.4. push 测试</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-参考文档"><span class="nav-number">6.</span> <span class="nav-text">6. 参考文档</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2018</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">曦瓜皮</span>
</div>


<div class="powered-by">
  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Muse
  </a>
</div>


        

        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  <script type="text/javascript" src="/blog/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/blog/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/blog/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/blog/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/blog/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/blog/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/blog/js/src/utils.js?v=5.1.2"></script>

  <script type="text/javascript" src="/blog/js/src/motion.js?v=5.1.2"></script>



  
  

  
  <script type="text/javascript" src="/blog/js/src/scrollspy.js?v=5.1.2"></script>
<script type="text/javascript" src="/blog/js/src/post-details.js?v=5.1.2"></script>



  


  <script type="text/javascript" src="/blog/js/src/bootstrap.js?v=5.1.2"></script>



  


  




	





  





  






  





  

  

  

  

  

  

</body>
</html>
